<template>
    <el-form class="setting-form" :model="formConfig" label-width="100px" size="default" label-position="left" @submit.prevent>
        <el-collapse v-model="state.formCollapse" >
            <el-scrollbar :height="scrollerHeight">
                <el-collapse-item title="基础属性" name="1">
                    <el-form-item label="对齐方式">
                        <el-radio-group v-model="formConfig.labelPosition">
                            <el-radio-button value="left" >居左</el-radio-button>
                            <el-radio-button value="top" >顶部</el-radio-button>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="标签宽度">
                        <el-input-number v-model="formConfig.labelWidth" :min="20"/>
                    </el-form-item>

                    <el-form-item label="字段标签对齐">
                        <el-radio-group v-model="formConfig.labelAlign">
                            <el-radio-button label="居左" value="label-left" />
                            <el-radio-button label="居中" value="label-center" />
                            <el-radio-button label="居右" value="label-right" />
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="标签大小">
                        <el-select v-model="formConfig.size">
                            <el-option label="default" value="default"/>
                            <el-option label="large" value="large"/>
                            <el-option label="small" value="small"/>
                        </el-select>
                    </el-form-item>
                </el-collapse-item>
                <el-collapse-item title="事件属性" name="2">
                    <template v-for="item in 50" :key="item">
                        <div>{{ item }}</div>
                    </template>
                </el-collapse-item>
            </el-scrollbar>
        </el-collapse>
    </el-form>
</template>

<script setup>
import { reactive,watch } from 'vue';

const props = defineProps({
    formConfig:{
        type:Object,
        default:()=>({})
    },
    scrollerHeight:{
        type:String,
        default:()=>'0px'
    },
    designer:{
        type:Object,
        default:()=>({})
    },
})

const state = reactive({
    formCollapse:['1'],
})

watch(
    ()=>props.formConfig,
    ()=>{
        props.designer.saveCurrentHistoryStep()
    },
    {
        deep:true
    }
)
</script>

<style lang='scss' scoped>
:deep(.el-collapse-item){
    padding: 0 10px;
}


</style>